<template>
  <div class="PersonDetail">
    <!-- <van-nav-bar
      title="个人档案详情"
      left-arrow
      @click-left="goBack"
    />-->
    <nav-bar :title="'个人档案详情'"></nav-bar>
    <div class="PersonDetail-tag" v-if="record.isTop"></div>
    <div class="wrap">
      <div class="PersonDetail-info">
        <img class="person-icon" :src="imgUrl+record.titleImage" alt />
        <img v-show="record.vipType === '0'" class="vip-tag" src="../assets/img/person/vip.png" alt />
        <div class="PersonDetail-info-content">
          <p class="rec-name">{{record.recordName}}</p>
          <!-- <p class="van-ellipsis">公司：合肥市某某装饰有限责任公司</p> -->
          <p class="van-ellipsis">职位：{{record.profession}}</p>
          <p class="van-ellipsis">联系方式：182-****-****</p>
        </div>
      </div>
      <div class="PersonDetail-introduce">
        <div class="title">个人简介</div>
        <p class="PersonDetail-introduce-txt">{{record.individualResume}}</p>
        <div class="title">个人经历</div>
        <p class="PersonDetail-introduce-txt">{{record.workExperience}}</p>
        <div class="title">作品展示</div>
        <div v-for="(item,index) in record.production" :key="index">
          <van-swipe class="PersonDetail-swiper" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(imgItem , imgIndex) in item.img" :key="imgIndex">
              <img
                style="object-fit: cover;width:100%;height:100%;"
                :src="imgUrl+imgItem.imgUrl"
                alt
              />
            </van-swipe-item>
          </van-swipe>
          <p class="PersonDetail-introduce-txt">{{item.text}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from '@/components/NavBar'
export default {
  components: {
    navBar,
  },
  name: 'PersonDetail',
  data() {
    return {
      imgUrl: config.imgUrl,
      record: {},
      activeNames: ['1', '3'],
      isRecommend: false, // 是否显示推荐 标签
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    getRecord(recordId) {
      this.$request({
        url: '/award/selectRecord',
        data: { recordId: recordId },
        method: 'post',
      }).then((rsp) => {
        if (rsp.code === 200) {
          rsp.data.production = JSON.parse(rsp.data.production)
          this.record = rsp.data
        } else {
          this.$tost.fail(rsp.content)
        }
      })
    },
  },
  mounted() {
    this.recordId = this.$route.query.recordId
    this.getRecord(this.recordId)
  },
}
</script>

<style lang='scss'>
@import '../assets/css/base';

.PersonDetail {
  &-tag {
    position: absolute;
    top: px2rem(120);
    left: 0;
    @include bgImg(
      px2rem(124),
      px2rem(42),
      '../assets/img/person/recommend.png'
    );
  }
  &-info {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: px2rem(124);
    & > .person-icon {
      width: px2rem(143);
      height: px2rem(140);
      border-radius: 50%;
      object-fit: cover;
    }
    & > .vip-tag {
      width: px2rem(151);
      height: px2rem(30);
      border-radius: px2rem(15);
      position: relative;
      z-index: 10;
      margin-top: px2rem(-20);
    }
    &-content {
      margin-top: px2rem(20);
      & > p {
        font-size: px2rem(26);
        line-height: 2;
        width: px2rem(500);
        color: #666;
        text-align: center;
      }
      .rec-name {
        font-weight: bold;
        font-size: px2rem(44);
      }
    }
  }
  &-introduce {
    .van-cell:not(:last-child)::after {
      border-color: $mainColor !important;
    }
    .van-cell__title {
      color: $mainColor !important;
    }
    .van-cell__right-icon {
      color: $mainColor !important;
    }
    &-txt {
      font-size: px2rem(24);
      font-weight: 400;
      color: #000000;
      line-height: px2rem(43);
      margin-bottom: px2rem(40);
    }
    .title {
      margin-top: px2rem(50);
      margin-bottom: px2rem(38);
      color: #404040;
      font-size: px2rem(38);
      font-weight: bold;
      // @include bgImg(100%, px2rem(54), '../assets/img/company/line.png');
      background-position: left bottom;
      line-height: px2rem(54);
      position: relative;
      padding-left: px2rem(20);
      &::after {
        position: absolute;
        content: '';
        left: 0;
        background: #0050a5;
        width: px2rem(8);
        height: px2rem(32);
        top: 50%;
        margin-top: px2rem(-16);
      }
    }
  }
  &-swiper {
    img {
      width: 100%;
      height: px2rem(438);
    }
  }
}
</style>
